<template>
  <div>
    <TopBack title="首页"></TopBack>
    <div class="home">
      <div class="home-top">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img src="../../assets/image/lunbo/轮播1.jpeg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../../assets/image/lunbo/轮播2.jpeg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../../assets/image/lunbo/轮播3.jpeg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../../assets/image/lunbo/轮播4.jpeg" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
      <div class="center">
        <!-- 搜索界面 -->
        <div class="search">
          <!-- 通知栏 -->
          <div class="hint">
            <van-notice-bar
              background="#FFEFF0"
              color="#E31829"
              left-icon="volume-o"
              text="防疫期间，省内外来(返)人员需提供48小时内核酸检测阴性证明，请提前确认酒店接待政策并做好相关准备，以免影响您的入住"
            />
          </div>
          <!-- 地区选择 -->
          <div class="center-place">
            <p class="sitechange">
              <van-row>
                <van-col span="6" class="site-duiqi"> 地区选择:</van-col>
                <van-col span="18">
                  <van-field
                    readonly
                    required
                    clickablelabel="选择地区"
                    :value="valueArea"
                    placeholder="请选择所在地区"
                    @click="bindShow"
                /></van-col>
              </van-row>
            </p>
            <p class="site-duiqi1">
              详细地址：<input
                type="text"
                v-model="site"
                style="border: none"
              />
            </p>
            <!--选择省市区-->
            <van-popup
              v-model="showArea"
              position="bottom"
              :style="{ height: '40%' }"
            >
              <van-area
                :area-list="areaList"
                @confirm="onAreaConfirm"
                @cancel="bindCancel"
              />
            </van-popup>
          </div>
          <!-- 时间选择 -->
          <div class="center-date">
            <van-row>
              <van-col span="4" class="dateCom">日期:</van-col>
              <van-col span="8">
                <van-cell title="开始" :value="start" @click="show = true" />
                <van-calendar
                  v-model="show"
                  @confirm="startDate"
                  :min-date="minDate"
                  :max-date="maxDate"
                />
              </van-col>
              <van-col span="8">
                <van-cell title="结束" :value="end" @click="show1 = true" />
                <van-calendar
                  v-model="show1"
                  @confirm="endDate"
                  :min-date="minDate"
                  :max-date="maxDate"
                />
              </van-col>
              <van-col span="4" class="dateCom">共{{ dateComp }}天</van-col>
            </van-row>
          </div>
          <!-- 搜索框 -->
          <div class="search-min">
            <van-search
              v-model="search"
              placeholder="关键字/位置/品牌/酒店名"
              style="background: #fff"
            />
          </div>
          <!-- 搜索按钮 -->
          <div class="search-button">
            <van-button
              type="primary"
              size="large"
              color="#033E98"
              @click="menRef"
              >查找</van-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopBack from "../../components/TopBack";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      // 开始日期
      start: "",
      //   结束日期
      end: "",
      show: false,
      show1: false,
      //  存储开始结束日期
      date: {
        start: "",
        end: "",
      },
      areaList, //引用地区信息
      showArea: false,
      valueArea: "", //地区值
      arrArea: [], //存放地区数组
      // 详细地址
      site: "军民路",
      // 搜索内容
      search: "",
      minDate: new Date(),
      maxDate: new Date(),
    };
  },
  methods: {
    formatDate(date) {
      this.date.start = date;
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    formatDate1(date) {
      this.date.end = date;
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    startDate(date) {
      this.show = false;
      this.start = this.formatDate(date);
    },
    endDate(date) {
      this.show1 = false;
      this.end = this.formatDate1(date);
    },
    // 地区选择器开始
    bindShow() {
      this.showArea = true;
    },
    bindCancel() {
      this.showArea = false;
    },
    //地区选择
    onAreaConfirm(val) {
      this.showArea = false;
      this.arrArea = val;
      var addrInfo = val[0].name + "-" + val[1].name + "-" + val[2].name;
      this.valueArea = addrInfo;
    },
    // 跳转酒店页面
    menRef() {
      let sum = this.dateComp;
      this.$router.push({
        path: "/menu",
        query: {
          start: this.start,
          end: this.end,
          valueArea: this.valueArea,
          sum,
        },
      });
    },
  },
  components: {
    TopBack,
  },
  // watch:{
  //   date:{
  //     deep:true,
  //     handler(newvalue,oldvalue){
  //       console.log(newvalue,'-监听-',oldvalue)
  //     }
  //   }
  // },
  computed: {
    dateComp() {
      let sum = parseInt(
        (new Date(this.end).getTime() - new Date(this.start).getTime()) /
          86400000
      );
      if (sum < 1) {
        return 1;
      }
      return sum;
    },
  },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#EEF2F6;");
  },
  mounted() {
    this.maxDate = new Date(this.minDate);
    this.maxDate.setDate(this.minDate.getDate() + 30);
    if (this.start == "" && this.end == "") {
      var aData = new Date();
      this.value = aData.getMonth() + 1 + "/" + aData.getDate();
      this.start = this.value;
      var day3 = new Date();
 day3.setTime(day3.getTime()+24*60*60*1000);
 var s3 =  (day3.getMonth()+1) + "/" + day3.getDate()
      this.end = s3;
      console.log(s3,typeof(s3));
    }
  },
};
</script>

<style lang="less" scoped>
.home {
  font-size: 14px;
}
.home-top {
  height: 180px;
  border-radius: 0 0 20px 20px;
  background-color: #9aaac4;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  img {
    width: 100%;
    height: 150px;
  }
  // background-color: #39a9ed;
  // border-radius: 0 0 20px 20px;
}
.center {
  position: absolute;
  top: 30%;
  left: 5%;
  right: 5%;
}
.search {
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
}

.center-place > p {
  border-bottom: 1px solid #ccc;
}
.center-place .site-duiqi {
  margin-top: 10px;
}
.center-place .site-duiqi1 {
  padding-bottom: 10px;
}
.center-date {
  border-bottom: 1px solid #ccc;
}
.center-date .van-col {
}
.dateCom {
  text-align: center;
  padding-top: 12px;
}
.van-button {
  border-radius: 25px;
}
</style>
